<template>
    <div class="classification">
        <h2>座位管理</h2>
        <div class="add" @click="add">
            <el-button type="primary" plain>添加</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                class="myTable"
                height="670"
        >
            <el-table-column
                    prop="table_id"
                    label="座位编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="is_use"
                    label="是否被使用， 0代表使用，1代表未使用"
                   >
            </el-table-column>
            <el-table-column
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle @click="change(`${scope.row.table_id}`,`${scope.row.is_use}`)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="myDelete(`${scope.row.table_id}`)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer
                :title="title"
                :visible.sync="drawer"
                :direction="direction"
        >
            <hr>
            <el-input
                    placeholder="请输入座位号"
                    prefix-icon="el-icon-house"
                    v-model="table_id"
                    style="margin-bottom: 20px"
                    v-if="!flag"
            >
            </el-input>
            <el-input
                    placeholder="请输入座位使用情况，0代表使用  1代表未使用"
                    prefix-icon="el-icon-open"
                    v-model="is_use"
                    style="margin-bottom: 20px"
                    v-if="flag"
            >
            </el-input>
            <el-button type="primary" icon="el-icon-edit" circle @click="change1" v-if="flag"></el-button>
            <el-button type="primary" icon="el-icon-plus" circle @click="add1" v-if="!flag"></el-button>
        </el-drawer>
    </div>
</template>

<script>
    import {getseat, addseat, changeseat, deleteseat} from '../api/api'
    export default {
        name: "seat",
        data(){
            return{
                tableData:[],
                drawer:false,
                title:'',
                direction: 'rtl',
                table_id:'',
                is_use:'',
                flag:true
            }
        },
        f
        methods:{
            //添加
            add(){
                this.drawer = true
                this.flag = false
                this.title = '添加座位'
            },
            add1(){
                addseat(this.table_id).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: '添加失败!'
                        });
                    }
                    this.table_id = ''
                    this.get()
                    this.drawer = false
                })
            },
            //修改
            change(table_id, is_use){
                this.table_id = table_id
                this.is_use = is_use
                this.drawer = true
                this.flag = true
                this.title = '修改座位号为'+ table_id + '信息'
            },
            change1(){
                changeseat(this.table_id, this.is_use).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: '修改失败!'
                        });
                    }
                    this.get()
                    this.drawer = false
                })
            },
            //删除
            myDelete(table_id){
                this.$confirm(`确定删除座位号为${table_id}的座位吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteseat(table_id).then(res=>{
                        // console.log(res)
                        if(res.status == 0){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                        this.get()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        //    获取座位信息
            get(){
                getseat().then(res=>{
                    if(res.status == 0){
                        this.tableData = res.data
                    }
                })
            }
        },
        created() {
            this.get()
        }
    }
</script>

<style scoped>
    .classification {
        width: 100%;
        padding-left: 50px;
        padding-right: 200px;
        box-sizing: border-box;
    }
    .myTable {
        margin-top: 30px;
        width: 50%;
    }
    /deep/.cell {
        text-align: center;
    }
    .add {
        margin-left: 50%;
    }
    /deep/.el-drawer__body{
        padding: 0 30px;
    }
    hr {
        margin-bottom: 30px;
    }
</style>
